<template>
	<view class="module-product-info">
		<image class="media-object" :src="thumb" mode="widthFix"></image>
		<view class="media-content">
			<view class="media-title">{{ title }}</view>
			<view class="media-tips">
				{{ tips }}
				<view class="media-count">x{{ count }}</view>
			</view>
			<view class="item-price">
				<span class="price-count">￥{{ price }}</span>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * productInfo 商品信息展示
 * @property {String} thumb 商品图片链接
 * @property {String} title 商品标题
 * @property {String} tips  商品介绍
 * @property {Number} count 商品数量
 * @property {Number} price 商品价格
 * @example <productInfo :thumb="" :title="" :tips="" :count="" :price=""></productInfo>
 */
export default {
	props: {
		thumb: {
			type: String,
			default:
				'https://img13.360buyimg.com/n1/jfs/t1/98527/32/18678/410306/5e97c828Ed2dca4a3/01a16e691bd5f008.jpg',
		},
		title: {
			type: String,
			default: '',
		},
		tips: {
			type: String,
			default: '',
		},
		count: {
			type: Number,
			default: 1,
		},
		price: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {};
	},
	methods: {},
};
</script>

<style lang="scss">
.module-product-info {
	display: flex;
	width: 100%;
	.media-object {
		width: 160rpx;
		height: auto;
	}

	.media-content {
		flex: 1;
		padding-left: $uni-spacing-base;
	}
	.media-title {
		margin: 0 0 $uni-spacing-sm;
		line-height: 36rpx;
		@include textEllipsis(2);
	}
	.media-tips {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin: 0 0 $uni-spacing-lg;
	}

	.media-count {
		float: right;
		color: $ds-main-color;
		font-size: 24rpx;
	}

	.item-price {
		position: relative;
	}

	.price-count {
		color: $uni-text-price;
		font-size: $uni-font-size-base;
	}

	.item-number {
		float: right;
	}
}
</style>
